<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script type="text/javascript">
  let Home = {
    template: '<h1>This is Home!</h1>'
  }
  let About = {
    template: '<h1>This is About!</h1>'
  }
  let routes = [ // 定义路由规则
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
  let RouterLink = {
    props: ['to'],
    template: '<a :href="to"><slot name="default"></slot></a>'
  }
  let RouterView = {
    data () {
      return {
        url: window.location.pathname // 获取浏览器地址
      }
    },
    computed: {
      ViewComponent () { // 根据浏览器地址返回相应组件
        return routes.find(route => route.path === this.url).component
      }
    },
    render (h) {
      return h(this.ViewComponent)
    }
  }
  /* eslint-disable */
  let vm = new Vue({
    el: '#app',
    components: { RouterLink, RouterView }
  })
</script>
</body>
</html>